<template>
  <div class="imgdetial">
    <myheader title="传智博客 黑马程序员Vue.js"></myheader>
    <van-nav-bar
      title="图片详情"
      left-text="<返回"
      @click-left="$router.go(-1)"
    />
    <div class="imgbox">
      <div class="imgs" v-for="item in imglist" :key="item.id">
        <img :src="item.src" alt="" />
      </div>
    </div>
    <comments :commentList="commentList" @click="publish"></comments>
    <van-button
      plain
      hairline
      type="danger"
      size="large"
      @click="loadMore"
      v-if="haveMore"
      >加载更多</van-button
    >

    <van-button
      plain
      hairline
      type="danger"
      size="large"
      @click="loadMore"
      v-else
      >没有更多</van-button
    >
  </div>
</template>

<script>
import myheader from "@/components/myheader.vue";
import myfooter from "@/components/myfooter.vue";
import comments from "@/components/comment.vue";
import { getthumimages } from "@/Api/post.js";
import { getcomments, postcomments } from "@/Api/comment.js";

export default {
  components: {
    myheader,
    myfooter,
    comments,
  },
  data() {
    return {
      imglist: [],
      commentList: [],
      pageindex: 1, //评论页数
      haveMore: true, //是否还有更多数据
    };
  },
  async mounted() {
    let imgid = this.$route.params.id;
    // console.log("-----", imgid);
    let res = await getthumimages(imgid);
    // console.log(res);
    this.imglist = res.data.message;
    // console.log(this.imglist);
    this.init();
  },

  methods: {
    async publish(comment) {
      if (comment == "") {
        this.$toast("不能留空");
        return;
      } else {
        // console.log(comment);
        // console.log(this.$route.params.id);
        let res = await postcomments(this.$route.params.id, {
          content: comment,
        });
        // console.log(res);
        this.init();

        let artid = this.$route.params.id;
        // console.log("----", artid);
        let res2 = await getcomments(artid, 1);
        this.commentList = res2.data.message;
      }
    },
    async init() {
      let artid = this.$route.params.id;
      let res = await getcomments(artid, this.pageindex);
      // console.log(res);
      this.commentList = res.data.message;
    },
    // 点击加载更多
    async loadMore() {
      this.pageindex++;
      // this.init();
      let id = this.$route.params.id;
      let res = await getcomments(id, this.pageindex);
      this.commentList.push(...res.data.message);
      if (res.data.message.length < 10) {
        this.haveMore = false;
      }
      // console.log(this.commentList);
    },
  },
};
</script>

<style lang="less" scoped>
.imgbox {
  display: flex;
  flex-wrap: wrap;

  .imgs {
    width: 100px;
    height: 100px;
    margin: 20px 20px;
    img {
      width: 100px;
    }
  }
}
</style>